<template>
  <div>
    <div v-if="loadPage">
      <el-upload
        class="avatar-uploader"
        :action="$Api.fileUpload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="viewPath" :src="viewPath" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-button
        type="primary"
        @click="submit"
        style="width:90%;margin-left: 5%;margin-top: 10px;"
      >确认上传</el-button>
      <el-button @click="closePage()" style="width:90%;margin-left: 5%;margin-top: 10px;">取消上传</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loadPage:true,
        viewPath: '',
        fileName: '',
        savePath: '',
        srcType: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        //        this.imageUrl = URL.createObjectURL(file.raw);
        this.viewPath = file.response.data.viewPath;
        this.fileName = file.response.data.fileName;
        this.savePath = file.response.data.savePath;
        this.srcType = file.response.data.srcType;
      },

      beforeAvatarUpload(file) {
        //        const isJPG = file.type === 'image/jpeg';
        //        const isLt2M = file.size / 1024 / 1024 < 2;
        //
        //        if (!isJPG) {
        //          this.$message.error('上传头像图片只能是 JPG 格式!');
        //        }
        //        if (!isLt2M) {
        //          this.$message.error('上传头像图片大小不能超过 2MB!');
        //        }
        //        return isJPG && isLt2M;
      },
      //提交
      submit: function() {
        console.log(this.$route.query.uuid)
        if(this.viewPath === '' && this.savePath === ''){
          this.$message({
            type: 'warning',
            message: '请添加一张图片'
          });
          return false
        }
        let params = {
          uuid: this.$route.query.uuid,
          filePathList: [{
            viewPath: this.viewPath,
            fileName: this.fileName,
            savePath: this.savePath,
            srcType: this.srcType
          }],
        }
        this.$post('/zwbk/file/qr-code/save-path-redis', params).then(res => {
          if (res.data.statusCode == 200) {
            this.$message({
              type: 'success',
              message: '上传成功!'
            });
            setTimeout(()=>{
              this.closePage();
            }, 1000)
          } else {
            this.loading = "";
            this.$message.error(res.data.msg);
          }
        })
      },
      //关闭当前页面
      closePage: function() {
        var userAgent = navigator.userAgent;
        if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") != -1) {
          window.history.back();
          window.close();
        } else if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1) {
          window.history.back();
          window.close();
        } else {
          window.opener = null;
          window.close();
        }

        if (WeixinJSBridge) {
          return WeixinJSBridge.call('closeWindow')
        } else if (navigator.userAgent.toLowerCase().indexOf("alipay") != -1) {
          return AlipayJSBridge.call('closeWebview')
        }
        if (window.obj) {
          return window.obj.closePageLppzRequest('')
        }
        if (window.webkit) {
          return window.webkit.messageHandlers.closePageLppzRequest.postMessage('')
        }
      },
      // 取消上传/上传成功之后关闭当前页
      closePage2(txt){

      }
    }
  }
</script>
<style scoped>
.avatar-uploader {
  margin: 10px;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
